<template>
	<view id="bind-info-page">
		<view class="row-list">
			<view class="row-cell">
				<view class="row-cell-icon el-icon-ali-user-id id-color"></view>
				<view class="row-cell-title">用户ID</view>
				<view class="row-cell-right">
					<view class="right-content">{{userBindInfo.push_code}}</view>
				</view>
			</view>
			<view class="row-cell">
				<view class="row-cell-icon el-icon-ali-phone phone-color"></view>
				<view class="row-cell-title">手机号</view>
				<view class="row-cell-right">
					<view class="right-content">{{userBindInfo.phone}}</view>
				</view>
			</view>
			<view class="row-cell" @tap="toIdCardPage">
				<view class="row-cell-icon el-icon-ali-id-card id-card-color"></view>
				<view class="row-cell-title">身份证</view>
				<view class="row-cell-right" v-if="userBindInfo.id_card_num">
					<view class="right-content">{{userBindInfo.true_name}} <text class="unbound">({{cardCheckStatusText}})</text></view>
				</view>
				<view class="row-cell-right" v-else>
					<view class="right-content unbound">未绑定</view>
					<uni-icons class="row-right-icon" type="arrowright" color="#888" size="14"></uni-icons>
				</view>
			</view>
			<view class="row-cell" @tap="toBankPage">
				<view class="row-cell-icon el-icon-ali-bank bank-color"></view>
				<view class="row-cell-title">银行卡</view>
				<view class="row-cell-right" v-if="userBindInfo.bank_user_name">
					<view class="right-content">{{userBindInfo.bank_num}} <text class="unbound">(已绑定)</text></view>
					<text class="unbound" v-if="!userBindInfo.bank_num">(未完善)</text>
				</view>
				<view class="row-cell-right" v-else>
					<view class="right-content unbound">未绑定</view>
					<uni-icons class="row-right-icon" type="arrowright" color="#888" size="14"></uni-icons>
				</view>
			</view>
			<view class="row-cell" @tap="toSetqqPage">
				<view class="row-cell-icon el-icon-ali-QQ QQ-color"></view>
				<view class="row-cell-title">QQ号</view>
				<view class="row-cell-right" v-if="userBindInfo.qq">
					<view class="right-content">{{userBindInfo.qq}}</view>
					<uni-icons class="row-right-icon" type="arrowright" color="#888" size="14"></uni-icons>
				</view>
				<view class="row-cell-right" v-else>
					<view class="right-content unbound">未绑定</view>
					<uni-icons class="row-right-icon" type="arrowright" color="#888" size="14"></uni-icons>
				</view>
			</view>
			<view class="row-cell">
				<view class="row-cell-icon el-icon-ali-wechat wechat-color"></view>
				<view class="row-cell-title">微信昵称</view>
				<view class="row-cell-right">
					<view class="right-content">{{userBindInfo.we_chat_name}}</view>
				</view>
			</view>
			<view class="row-cell" @tap="toSetwxPayCodePage">
				<view class="row-cell-icon el-icon-ali-qrcode qrcode-color"></view>
				<view class="row-cell-title">微信收款码</view>
				<view class="row-cell-right" v-if="userBindInfo.wx_pay_code">
					<text class="unbound">已绑定</text>
					<uni-icons class="row-right-icon" type="arrowright" color="#888" size="14"></uni-icons>
				</view>
				<view class="row-cell-right" v-else>
					<view class="right-content unbound">未绑定</view>
					<uni-icons class="row-right-icon" type="arrowright" color="#888" size="14"></uni-icons>
				</view>
			</view>
			<view class="row-cell" @tap="toSetaliPayCodePage">
				<view class="row-cell-icon el-icon-ali-qrcode qrcode-color"></view>
				<view class="row-cell-title">支付宝</view>
<!--				<view class="row-cell-right" v-if="userBindInfo.ali_pay_code">-->
<!--					<text class="unbound">已绑定</text>-->
<!--					<uni-icons class="row-right-icon" type="arrowright" color="#888" size="14"></uni-icons>-->
<!--				</view>-->
<!--				<view class="row-cell-right" v-else>-->
<!--					<view class="right-content unbound">未绑定</view>-->
<!--					<uni-icons class="row-right-icon" type="arrowright" color="#888" size="14"></uni-icons>-->
<!--				</view>-->
        <view class="row-cell-right" v-if="userBindInfo.ali_is_bind == true">
          <text class="unbound">已绑定</text>
          <uni-icons class="row-right-icon" type="arrowright" color="#888" size="14"></uni-icons>
        </view>
        <view class="row-cell-right" v-else>
          <view class="right-content unbound">未绑定</view>
          <uni-icons class="row-right-icon" type="arrowright" color="#888" size="14"></uni-icons>
        </view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		apiBindPushUserInfo
	} from '../../../http/apis.js'
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState(['token'])
		},
		data(){
			return{
				userBindInfo: {},
				cardCheckStatusText: '',
			}
		},
		onLoad() {
			this.getUserBindInfo()
		},
		onShow() {
			this.getUserBindInfo()
		},
		methods:{
			getUserBindInfo(){
				apiBindPushUserInfo({
					token: this.token
				}).then(res =>{
				    if(res.data.code == 1)  {
						this.userBindInfo = res.data.msg
						if(this.userBindInfo.id_card_status == 1){
							this.cardCheckStatusText = '已认证'
						} else if (this.userBindInfo.id_card_status == 3){
							this.cardCheckStatusText = '审核中'
						} else {
							this.cardCheckStatusText = this.userBindInfo.id_card_remark
						}
					}
				}).catch(res => {
					this.$msg.showToast(res.data.msg)
				})
			},
			toIdCardPage(){
				if (this.userBindInfo.id_card_status == 2) {
					uni.navigateTo({
						url: './bindIdCard?type=1&levelType=' + this.userBindInfo.level_type
					})
				} else if(this.userBindInfo.id_card_status == 3){
					this.$msg.showToast('审核中')
				} else{
					this.$msg.showToast('身份证已绑定')
				}
			},
			toBankPage(){
			  if (this.userBindInfo.bank_user_name) {
			    this.$msg.showToast("银行卡已绑定")
          return
        }
				uni.navigateTo({
					url: './bindBank'
				});
			},
			toSetqqPage(){
				var  qqNum = this.userBindInfo.qq ? this.userBindInfo.qq : ''
				uni.navigateTo({
					url: './bindChatAccount?qq=' + qqNum
				});
			},
			toSetwxPayCodePage(){
				let type = this.userBindInfo.wx_pay_code ? 2 : 1
				uni.navigateTo({
					url: './bindWechatCollectionCode?type=' + type
				})
			},
			toSetaliPayCodePage(){
				let type = this.userBindInfo.ali_pay_code ? 1 : 2
				let pushId = this.userBindInfo.push_id
				// uni.navigateTo({
				// 	url: './bindAlipayCode?type=' + type + '&pushId=' + pushId
				// })
        if (this.userBindInfo.ali_is_bind == true) {
          uni.navigateTo({
            url: './bindAlipayCode?type=' + type + '&pushId=' + pushId	+ '&aliIsBind=1&aliaccount='+this.userBindInfo.aliaccount+'&aliname='+this.userBindInfo.aliname
          })
        }else{
          uni.navigateTo({
            url: './bindAlipayCode?type=' + type + '&pushId=' + pushId	+ '&aliIsBind=0'
          })
        }
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
	}
	#bind-info-page {
		.row-list {
			background: #FFFFFF;
			box-shadow: 0px 0px 10upx 0px rgba(0, 0, 0, 0.1);
			border-radius: 20upx;
			margin: 32upx 32upx 0 32upx;
			.row-cell {
				position: relative;
				border-bottom: 1px solid #F8F8F8;
				padding: 0 24upx 0 38upx;
				height: 106upx;
				line-height: 106upx;
				.row-cell-icon {
					display: inline-block;
					font-size: 40upx;
					margin-right: 20upx;
					line-height: 106upx;
					&.id-color {
						color: #FF5001;
					}
					&.phone-color{
						color: #FFC901;
					}
					&.id-card-color {
						color: #FF7E4D;
					}
					&.bank-color {
						color: #f048da;
					}
					&.QQ-color {
						color: #FF4D4D;
					}
					&.wechat-color {
						color: #33e042;
					}
					&.qrcode-color {
						color: #488CF0;
					}
				}
				.unbound {
					color: $theme-color;
				}
				.row-cell-title {
					display: inline-block;
					font-size: $font-base;
					vertical-align: top;
					color: #333333;
					font-size: 30upx;
				}
				.row-cell-right {
					display: inline-block;
					position: absolute;
					right: 20upx;
					color: #666666;
					font-size: 30upx;
					.right-content {
						display: inline-block;
					}
					.row-right-icon {
						vertical-align: top;
						margin-left: 10upx;
					}
				}
			}
		}
	}
</style>
